<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: orange;
        }

        .abc {
            width: 100px;
            height: 100px;
            background: skyblue;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 1. v-for(数字，字符串，数组) -->
        <!-- <ul>
            <li v-for="(item, index) in arr">
                <p>
                    我是名字是：{{ item.name }}
                </p>
                <p>
                    我是年龄是：{{ item.age }}
                </p>
            </li>
        </ul> -->

        <!-- <ul>
            <li v-for="(value, key, index) in obj">
                {{ value }}: {{ key }} : {{ index }}
            </li>
        </ul> -->

        <!-- 2. v-show(css) -->
        <!-- 3. v-if(节点) -->

        <!-- <h3 v-show="0">
            标题
        </h3> -->

        <ul>
            <!-- <li v-for="item in list">
                {{ item.name }} ---  -->
                <!-- <span>
                    {{ item.code === 0? '已付款': '待支付'}}
                </span> -->

                <!-- <span v-if="item.code === 0">
                    已付款
                </span>
                <span v-else-if="item.code === 1">
                    待支付
                </span>
                <span v-else>
                    已退款
                </span> -->
            <!-- </li> -->
        </ul>

        <!-- 4. v-bind -->
        <div v-bind:class="className">

        </div>

        <button @click="className = 'abc'">点我</button>

    </div>

    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                className: 'box',
                message: "我是信息",
                num: 88,
                str: "string",
                arr: [
                    {
                        name: "张三",
                        age: 20
                    },
                    {
                        name: "李四",
                        age: 22
                    },
                ],
                obj: {
                    name: "张三",
                    age: 20
                },
                list: [
                    {
                        name: "商品1",
                        code: 0
                    },
                    {
                        name: "商品2",
                        code: 1
                    },
                    {
                        name: "商品3",
                        code: 2
                    },
                ]
            }
        })
    </script>
</body>

</html>